<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination } from "swiper/modules"; // 注意这里是从 swiper/modules 导入
import { ImageAddHttp } from "@/utils/index"

import { useAppStore  }  from "@/stores"

const appStore = useAppStore()
// appStore.setPreImages([
//   "https://via.placeholder.com/640x360?text=Slide+1" ,
//   "/src/static/banner.jpg" ,
//   "/src/static/banner.png" ,
//   "/src/static/header_bg.jpg" 
// ])

</script>
<template>
  <div class="swiper-container" @click="appStore.setShowLayer(false)">
    <!-- Swiper -->
    <swiper
      :modules="[Pagination]"
      :initial-slide="appStore.preImageIndex"
      pagination
      loop
      autoHeight
    >
      <swiper-slide v-for="(item, index) in appStore.preImages" :key="index" >
        <div class="slide-content" @click.stop >
          <img :src="ImageAddHttp(item)" @click="appStore.setShowLayer(false)" :alt="`Slide ${index + 1}`" />
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template> 
<style lang="scss" scoped>
/* 让容器全屏并上下居中 */
.swiper-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 父容器高度占满视口 */
  background-color: #f5f5f5
}
/* Swiper 幻灯片内容：上下居中 */
.slide-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 继承父容器高度 */
  min-height: 100px; /* 设置最小高度以防内容过少 */
  text-align: center;
}

/* Swiper 图片样式 */
.slide-content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* 确保图片按比例显示 */
}

::v-deep(.swiper-pagination) {
  position: fixed;
  bottom: 20px;
}

::v-deep(.swiper-pagination-bullet) {
  background: #8a8a8a; /* 激活指示器颜色 */
  opacity: 0.6;
}
::v-deep(.swiper-pagination-bullet-active) {
  background: #ffffff; /* 激活指示器颜色 */
  opacity: 1;
}

</style>